<template>
  <div class="soft-layout white bg my-6 py-5">
    <section class="layout-content">
      <div class="container">
        <div class="content-header feedback-header">
          <div class="h-150 w-r is-align-middle w-r--flex">
            <div class="w-c w-c-2">
              <svg width="70" height="60" viewBox="0 0 125 107" xmlns="http://www.w3.org/2000/svg">
                <g fill="none" fill-rule="evenodd">
                  <circle cx="48" cy="59" r="48" class="circle-fill"></circle>
                  <path
                    d="M58.536 39.713c0-6.884 1.72-14.007 5.163-21.368 3.443-7.36 8.167-13.458 14.173-18.292l11.645 7.91c-3.589 4.98-6.262 10.016-8.02 15.106S78.86 33.598 78.86 39.384v13.623H58.536V39.713z"
                    class="path-fill"></path>
                  <path
                    d="M93.252 39.713c0-6.884 1.722-14.007 5.164-21.368 3.442-7.36 8.166-13.458 14.172-18.292l11.646 7.91c-3.589 4.98-6.262 10.016-8.02 15.106s-2.637 10.529-2.637 16.315v13.623H93.252V39.713z"
                    class="path-fill-1"></path>
                </g>
              </svg>
            </div>
            <div class="w-c w-c-22"><h4>
              留言反馈
              <span class="ml-2 fs-18">({{ total }} 条)</span></h4></div>
          </div>
        </div>
        <div class="comments">
          <div class="comments-form mb-7">
            <form>
              <div class="w-r">
                <div class="w-c w-c-12">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="icon-user2 text-muted"></i>
                      </span>
                    </div>
                    <!--                    <el-input class="form-control" v-model="userName" placeholder="昵称"></el-input>-->
                    <input type="text" v-model="commentForm.userName" placeholder="昵称" class="form-control">
                  </div>
                </div>
                <div class="w-c w-c-12">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">
                        <i class="icon-mail text-muted"></i>
                      </span>
                    </div>
                    <input type="text" placeholder="邮箱" v-model="commentForm.email" class="form-control"></div>
                </div>
              </div>
              <textarea rows="5" placeholder="景点需求及景点推荐请移步到左上角【提交景点】处..." class="form-control"
                        v-model="commentForm.content"></textarea>
            </form>
            <div class="comments-form-footer d-flex align-items-center pl-5 clearfix">
              <a class="nav-link px-0 cursor-pointer el-popover__reference" aria-describedby="el-popover-5505"
                 tabindex="0">
                <i class="icon-smile fs-18"></i>
              </a>
              <span>
                <div role="tooltip" id="el-popover-5505"
                     aria-hidden="true"
                     class="el-popover el-popper emoji-popover"
                     tabindex="0" style="display: none;">
                </div>
                <span class="el-popover__reference-wrapper">
              </span>
              </span>
              <div class="comment-post flex-grow text-right">
                <el-button class="btn btn-theme px-6" type="primary" @click="addComment">提交</el-button>
              </div>
            </div>
          </div>
          <ul class="list" v-for="item in commentList" :key="item.pid">
            <li class="list-item p-0">
              <a class="w-48 mr-3 ml-0">
              </a>
              <div class="list-body">
                <div class="d-flex align-items-center">
                  <span class="fs-16 text-primary mr-5">
                    {{ item.createTime }}
                </span>
                  <span
                    class="opacity-80">
                    <span class="fs-12 text-muted mr-3">安徽宿州埇桥区的网友</span>
                    <span
                      class="fs-12 text-muted mr-3">10.15.7</span>
                    <span
                      class="fs-12 text-muted mr-3">safari 14.1.2</span>
                  </span>
                </div>
                <small class="d-block text-muted text-ellipsis">
                  {{ item.createTime }}
                </small>
                <div class="pt-4 pb-5 mb-6 bb-dashed">
                  <div class="text-light-dark">
                    {{ item.content }}
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <el-pagination
            :page-size=3
            class="el-pagination-gl"
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :pager-count=pagerCount
            :total=total
          >
          </el-pagination>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      commentForm: {
        userPid: "",
        productPid: "",
        userName: "",
        content: "",
        email: "",
      },
      total: 0, // 总量
      currentPage: 1, //当前页码
      commentList: "",
      pagerCount: 5,
    };
  },
  activated() {
    this._getComment_()
  },
  methods: {
    // 获取数据方法封装
    _getComment_() {
      this.$axios
        .post("cat/usercomment/list", {
          page: this.current,
          limit: 2,
        })
        .then((res) => {
          this.commentList = res.data.page.list;
          this.total = res.data.page.totalCount;
          // console.log(" res.data.page.totalCount",  res.data.page.totalCount)
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    },
    handleCurrentChange(val) {
      this.current = val;
      this._getComment_()
    },
    addComment() {
      let userInfo = JSON.parse(this.$store.getters["catUser/getUser"])
      if (userInfo !== "") {
        this.commentForm.userPid = userInfo.pid
        this.commentForm.userName = userInfo.userName
      }
      this.$axios
        .post("cat/usercomment/save", this.commentForm)
        .then((res) => {
          this.$message({
            showClose: false,
            message: "评论成功",
            type: "success",
            duration: 3000,
            onClose: () => {
              this.commentForm = ""
              this._getComment_()
            },
          });
        })
        .catch((err) => {
          return Promise.reject(err);
        });
    }
  }
};
</script>

<style scoped>
@import "../../assets/css/macw.css";
/*@import "https://static.konlonair.com/FlyCat-client/css/7343d4b.css";*/
</style>
